<template>
  <MSelect :options="options" :fields="fields" v-model="value"></MSelect>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { definePropType } from '@/utils'
import MSelect from '@/components/form/src/components/MSelect.vue'
import { SelectParamsType, useOptions } from './useOptions'

defineOptions({
  name: 'MSelectParams'
})

const props = defineProps({
  modelValue: {
    type: [String, Number, Array]
  },
  type: {
    type: definePropType<SelectParamsType>(String),
    required: true
  }
})

const emit = defineEmits({
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  'update:modelValue': (val: any) => true
})

const fields = {
  value: 'name',
  label: 'name'
}

const value = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emit('update:modelValue', val)
  }
})

const options = ref<any[]>([])

const { getOptions } = useOptions(props.type)
getOptions().then((data) => {
  options.value = data
})
</script>

<style lang="scss" scoped></style>
